<template>
	<view class="mainBox">
		<!-- 模板 -->
		<baseform ref="form" :groupList='groupList' :pageFormData="pageFormData"
			@remoteSearch='remoteSearch' :formItemList='formItemList' @selectChange='selectChange' @submit='submit'>
		</baseform>
	</view>
</template>

<script>
	import baseform from '@/components/base-form-uni.vue'
	export default {
		components: {
			baseform
		},
		data() {
			return {
				pageFormData: {}, // 页面表单数据
				formItemList: [], // 页面表单元素配置项集合
			}
		},
		computed: {
			pageConfig() {
				return this.$t('template')
			},
			groupList() {
				return this.$t('template').groupList
			}
		},
		onReady() {
			// 模块标题
			uni.setNavigationBarTitle({
				title: this.$t('template').basicConfig.title
			});
		},
		onLoad() {
			this.formItemList = this.pageConfig.pageItemConfig
			this.pageFormData = this.$initFormData(this.formItemList)
		},
		methods: {
			/**
			 * @explain
			 * 统一处理items的方法
			 * this.$handleItems(data, textKey, valueKey)
			 * 
			 * @explain 
			 * 设置items的方法
			 * this.$setItems(formItemList, key, items)
			 */
			
			// 设置下拉框内容
			setSelectItems(formItemList, key, items) {
				this.$setSelectItems(formItemList, key, items)
			},
			
			// 提交方法
			submit(params) {
				console.log(params);
			},
			
			// 远程搜索方法
			remoteSearch(i, val) {
				console.log(i)
				console.log(val)
			},
			
			// 选择器改变时调用
			selectChange(index, key) {
				console.log(key, index)
				console.log(this.pageFormData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	padding: 2rem 0.5rem;
	// 	background-color: #fff;
	// }
</style>